<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>功能演示</title>
    <link
      rel="stylesheet"
      href="/public/static/unpkg/element-ui/lib/theme-chalk/index.css"
    />
    <script src="/public/static/unpkg/vue/dist/vue.min.js"></script>
    <script src="/public/static/unpkg/element-ui/lib/index.js"></script>
    <script src="/public/static/unpkg/axios/axios.min.js"></script>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-main>
          <el-card>
            <div slot="header">上传小程序代码接口演示</div>
            <el-form>
              <el-form-item label="小程序 Appid">
                <el-input v-model="form.appid" />
              </el-form-item>
              <el-form-item label="版本号">
                <el-input v-model="form.version" />
              </el-form-item>
              <el-form-item label="版本描述">
                <el-input v-model="form.desc" />
              </el-form-item>
              <el-form-item label="密钥字符串">
                <el-input v-model="form.private" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="小程序包路径">
                <el-input v-model="form.root" placeholder="可选" :rows="5" />
              </el-form-item>
            </el-form>
            <div class="footer">
              <el-button
                type="primary"
                :loading="loading.upload"
                @click="upload('wemini')"
                >上传微信小程序</el-button
              >
              <el-button
                type="success"
                :loading="loading.preview"
                @click="preview('wemini')"
                >预览微信二维码</el-button
              >
              <el-button
                type="warning"
                :loading="loading.sourceMap"
                @click="sourceMap('wemini')"
                >获取微信上传发布记录</el-button
              >
            </div>
            <div class="footer">
              <el-button
                type="primary"
                :loading="loading.upload"
                @click="upload('douyin')"
                >上传抖音小程序</el-button
              >
              <el-button
                type="success"
                :loading="loading.preview"
                @click="preview('douyin')"
                >预览抖音二维码</el-button
              >
              <el-button
                type="warning"
                :loading="loading.sourceMap"
                @click="sourceMap('douyin')"
                >获取抖音上传发布记录</el-button
              >
            </div>
          </el-card>
          <el-card v-if="result" class="result">
            <div slot="header">输出结果</div>
            <pre v-html="result"></pre>
          </el-card>
        </el-main>
      </el-container>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: function () {
          return {
            loading: {
              upload: false,
              preview: false,
              sourceMap: false,
            },
            form: {
              appid: "tt1e0f68b2813e258901",
              version: "1.0.1",
              desc: "mnongclub",
              private: "",
              root: null,
            },
            result: null,
          };
        },
        created() {},
        methods: {
          upload(platform) {
            this.result = null;
            this.loading.upload = true;
            this.form.platform = platform;
            axios
              .post("/mini/upload", this.form)
              .then((response) => {
                const data = response.data;
                if (data.code) {
                  this.$alert(data.error);
                } else {
                  this.result = JSON.stringify(data);
                  this.$alert("请前往对应的小程序官方后台查看结果", "上传成功");
                }
                this.loading.upload = false;
              })
              .catch((err) => {
                this.loading.upload = false;
                this.error(err);
              });
          },
          preview(platform) {
            this.result = null;
            this.loading.preview = true;
            this.form.platform = platform;
            axios
              .post("/mini/preview", this.form)
              .then((response) => {
                const data = response.data;
                if (data.base64) {
                  this.$alert(
                    `<img src='${data.base64}' style='width: 300px;' />`,
                    "扫码预览",
                    {
                      dangerouslyUseHTMLString: true,
                      center: true,
                    }
                  );
                  this.result = JSON.stringify(data);
                } else {
                  this.$alert(data.error);
                }
                this.loading.preview = false;
              })
              .catch((err) => {
                this.loading.preview = false;
                this.error(err);
              });
          },
          sourceMap(platform) {
            this.result = null;
            this.loading.sourceMap = true;
            this.form.platform = platform;
            axios
              .post("/mini/sourceMap", this.form)
              .then((response) => {
                const data = response.data;
                if (data.wx) {
                  this.result = JSON.stringify(data);
                  this.$alert(`线上最新版本号：${data.wx.userVersion}`);
                } else {
                  this.$alert(data.error);
                }
                this.loading.sourceMap = false;
              })
              .catch((err) => {
                this.loading.sourceMap = false;
                this.error(err);
              });
          },
          error(err) {
            this.$alert(err.response.data.error);
            this.result = JSON.stringify(err.response.data);
          },
        },
      });
    </script>
    <style>
      body {
        background: #fafafa;
      }

      #app {
        width: 800px;
        margin: 0 auto;
      }

      .result {
        margin-top: 20px;
      }

      .result pre {
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .footer {
        padding: 20px;
        text-align: center;
      }
    </style>
  </body>
</html>
